<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
    <div style="margin-top: 14px;">
      <h5 style="text-align: left; margin-left: 14px;"> 符合条件的设计单总数：{{this.tableData.length}} 例</h5>
      <h5 style="text-align: left; margin-left: 14px;">
        <span style="color: red;">其中等待执行的设计单总数：{{this.dendai}}例&nbsp;&nbsp;</span>
        <!-- 其中正在执行的生产派工单总数：7例,-->
        <span style="color: blue;">其中完成的设计单总数:{{this.wc}}例&nbsp;&nbsp;</span>

      </h5>
    </div>
    <div style="background-color: #E9EEF3; height: 450px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
        <el-table :data="tableData" style="width: 100%;height: 400px;">
          <el-table-column prop="pducess_id" label="设计单编号" width="320">
          </el-table-column>
          <el-table-column prop="proSige_id" label="产品编号" width="140">
          </el-table-column>
          <el-table-column prop="pName" label="产品名称" width="140">
          </el-table-column>
          <el-table-column prop="wuLiaoSigin" label="设计单状态" width="140">
            <!-- <template slot-scope="scope">
              <p v-if="scope.row.reviewSign== '未审核' "> 等待</p>
              <p v-if="scope.row.reviewSign== '已审核' "> 完成</p>
            </template> -->
          </el-table-column>
          <el-table-column prop="reviewSign" label="审核状态" width="140">
          </el-table-column>
          <el-table-column label="查看" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="zhisjd(scope.row)" round="">查看</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[1,2,7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div><!-- scpgdsh -->
    <el-drawer title="生产派工单" size="100%" :visible.sync="drawer" direction="ttb" :before-close="handleClose">
      <div style="text-align: center; margin-left: 930px; margin-top: 0px;">
        <span slot="footer" class="dialog-footer">
          <el-button style="width: 45px ; height: 35px;" @click="scjfds()">返回</el-button>
        </span>
      </div>
      <div class="body_main">
        <div style="padding: 13px;">
          <el-form :model="proDisOrder">
            <el-row>
              <el-col :span="14" style="text-align: left;">
                <span class="span_01">产品名称:{{this.dproList.pName}}</span>

              </el-col>
              <el-col :span="10" style="text-align: right;">
                <span class="span_01">产品编号:{{this.dproList.proSige_id}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 8px;">
              <el-col :span="8" style="text-align: left;">
                <span class="span_01">设计人:{{this.dproList.designer}}</span>
              </el-col>
              <el-col :span="16" style="text-align: right;">
                <span class="span_01">设计单边编号:{{this.dproList.pducess_id}}</span>
              </el-col>
            </el-row>
            <el-table border :data="tableData2" tooltip-effect="dark"
              style="width: 100%;margin-top: 26px;overflow: scroll;height: 178px" size="mini">
              <el-table-column prop="pucess_gid" label="序号" width="90">
              </el-table-column>
              <el-table-column prop="processesName" label="工序名称" width="120">
              </el-table-column>
              <el-table-column prop="processesid" label="工序编号" width="120">

              </el-table-column>
              <el-table-column prop="gongShiNum" label="工时数" width="120">
              </el-table-column>
              <el-table-column prop="unitGSPrice" label="单位工时成本" width="120">
              </el-table-column>
              <el-table-column prop="gSsumPrice" label="工时成本小计(元)" width="120">
              </el-table-column>
              <el-table-column prop="wugCount" label="物料成本成本小计(元)" width="150">
              </el-table-column>
              <el-table-column label="查看" width="90">
                <template slot-scope="scope">
                  <el-button type="primary" v-if="scope.row.wugCount!=0" size="mini" @click="lookWuliao(scope.row)"
                    round="">查看物料</el-button>
                  <p v-else style="color: red;">等待</p>



                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top: 32px">
              <el-col :span="16">
                <h5 style="text-align: left;">工时总成本:{{this.dproList.gongShiPrice}}</h5>
              </el-col>
              <el-col :span="8">
                <h5 style="text-align: right;">物料总成本:{{this.dproList.wuliaoSumPrice}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 6px">
              <el-col :span="16">
                <h5 style="text-align: left;">审核人:{{this.dproList.thereviewer}}</h5>
              </el-col>
              <el-col :span="8">
                <h5 style="text-align: right;">审核时间:{{this.dproList.audittime}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 6px;text-align: left;">
              <el-col :span="16">
                <sapn class="span_01">设计要求:{{this.dproList.designreq}}</sapn>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-drawer>
    <el-dialog title="工序物料设计单" :visible.sync="dialogVisible2" width="62%" height="300px" :before-close="handleClose">
      <el-row>
        <el-col :span="14" style="text-align: left;">
          <span class="span_01">设计单编号:{{this.dproList.pducess_id}}</span>
        </el-col>
        <el-col :span="10" style="text-align: right;">
          <span class="span_01">工序名称:{{this.processesName }}</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 8px;">
        <el-col :span="8" style="text-align: left;">
          <span class="span_01">登记人:{{this.dproList.redner}}</span>
        </el-col>
        <el-col :span="16" style="text-align: right;">
          <span class="span_01">登记时间:{{this.dproList.regtime}}</span>
        </el-col>
      </el-row>
      <el-table border :data="tableData3" tooltip-effect="dark" style="width: 100%;margin-top: 5px;" size="mini">
        <el-table-column type="index" width="75">
        </el-table-column>
        <el-table-column prop="pName" label="物料名称" width="115">
        </el-table-column>
        <el-table-column prop="wid" label="物料编号" width="115">
        </el-table-column>
        <el-table-column prop="wunum" label="工序用量" width="115">
        </el-table-column>
        <el-table-column prop="wuprice" label="单价(元)" width="115">
        </el-table-column>
        <el-table-column prop="wuCount" label="小计" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button style="width: 45px ; height: 25px;" @click="dialogVisible2 =false">关闭</el-button>

      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'repset',
    data() {
      return {
        dendai: 0,
        wc: 0,
        shNum: 0,
        zhixNum: 0,
        wcNum: 0,
        processesName: '',
        pageNum: 1,
        pageSize: 7,
        total: 0,
        tableData: [],
        tableData2: [],
        tableData3: [],
        dialogVisible3: false,
        dialogVisible2: false,
        drawer: false,
        dproList: {
          redner: '',
          pducess_id: 0,
          pName: '',
          proSige_id: 0,
          designer: '', //设计人
          gongShiPrice: '', //工时总成本
          thereviewer: '', //审核人
          audittime: '', //审核时间
          designreq: '', //设计要求
          regtime: ''
        },
        formLabelWidth: '120px',
        form: {
          num: 0,
          sjnum: 0
        },
      }
    },
    methods: {
      lookWuliao(data) {
        this.processesName = data.processesName;
        this.$http.post('production/product/selWuliao', this.$qs.stringify(data)).then(res => {
          if (res.status == 200) {
            this.tableData3 = res.data;
          }
        }).catch(err => {
          console.log(err);
        })
        this.dialogVisible2 = true;
      },
      scjfds() {
        this.drawer = false;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      GetOnline(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/gxwlcxfindByPager', data).then(res => {
          console.log(res.data);
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.total = res.data.total;
          this.tableData = res.data.rows;
          var dendai = 0;
          var wc = 0;
          for (var i = 0; i < this.tableData.length; i++) {
            // if (this.tableData[i].gongxueSigin == "等待审核") {
            //   dendai++;
            // } else {
            //   wc++;
            // }

            if (this.tableData[i].wuLiaoSigin == '已设计' && this.tableData[i].reviewSign == '已审核') {
              wc++;
            }else{
              dendai++;
            }

          }
          this.dendai = dendai;
          this.wc = wc;
        }).catch(err => {
          console.log(err);
        })
      },
      zhisjd(data) {
        this.dproList.redner = data.redner;
        this.dproList.pducess_id = data.pducess_id;
        this.dproList.wuliaoSumPrice = data.wuliaoSumPrice;
        this.dproList.pName = data.pName;
        this.dproList.proSige_id = data.proSige_id;
        this.dproList.designer = data.designer;
        this.dproList.gongShiPrice = data.gongShiPrice;
        this.dproList.thereviewer = data.thereviewer;
        this.dproList.audittime = data.audittime;
        this.dproList.designreq = data.designreq;
        this.dproList.regtime = data.regtime;
        var datas = new URLSearchParams();
        this.$http.post('production/product/cxProducess?pducess_id=' + data.pducess_id).then(res => {
          if (res.length != 0) {
            this.tableData2 = res.data;
            this.drawer = true;


          }
        }).catch(err => {
          console.log(err);
        })

      }
    },
    mounted() {
      this.GetOnline(this.pageNum, this.pageSize);
    }
  }
</script>

<style scoped="scoped">
  .el-input--mini .el-input__inner {
    height: 20px;
    line-height: 28px;
  }

  * {
    padding: 0px;
    margin: 0px;
  }

  .boder_one {
    border-top: none;
    border-left: none;
    border-right: none;
    width: 105px;
  }

  th {
    background-color: blue;
  }

  .el-table tr {
    background-color: royalblue;
  }

  .el-breadcrumb__inner {
    color: black;

  }

  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }

  .el-table td {
    padding: 10px 0;
  }

  #father {
    height: 480px;
    overflow: hidden;
    background: white;
    border: 1px solid white;
    border-radius: 12px;

  }

  .body_main {
    margin: 0px auto;
    width: 980px;
    height: 428px;
    background-color: white;
    margin-top: 15px;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-right: 3px solid #333333;
    border-bottom: 3px solid #333333;
  }

  .span_01 {
    font-size: 14px;
  }

  #sons {
    width: 100%;
    padding: 0px;
    background-color: white;
    margin-top: 15px;
  }

  #son {

    padding: 15px;
    width: 100%;
    background-color: white;

  }

  .input_01 {
    border-top: none;
    border-right: none;
    border-left: none;
  }
</style>
